src/components/onboarding/ProgressDots.tsx (1)

10-23: className 중복 코드 리팩토링 고려

조건부 className에서 h-2.5 w-2.5 rounded-full이 양쪽 분기에 중복됩니다. 가독성과 유지보수성 향상을 위해 공통 클래스를 분리하는 것을 고려해보세요.

🔎 제안하는 리팩토링

         {Array.from({ length: total }).map((_, i) => {
           const isActive = i <= current;
 
           return (
             <span
               key={i}
-              className={
-                isActive
-                  ? "bg-mint-01 h-2.5 w-2.5 rounded-full"
-                  : "bg-neutral-08 h-2.5 w-2.5 rounded-full"
-              }
+              className={`h-2.5 w-2.5 rounded-full ${
+                isActive ? "bg-mint-01" : "bg-neutral-08"
+              }`}
             />
           );
         })}

src/components/common/NameInput.tsx (1)

17-22: 매직 넘버 문서화 권장

라인 21의 36은 입력 필드의 패딩값으로 추정되지만 명확하지 않습니다. 코드 가독성을 위해 상수로 추출하거나 주석을 추가하는 것을 고려해보세요.

🔎 제안하는 개선

+const PADDING_WIDTH = 36; // px-4 (16px * 2) + border/extra spacing
+
 const NameInput = ({ value, onChange }: NameInputProps) => {
   const spanRef = useRef<HTMLSpanElement>(null);
   const [inputWidth, setInputWidth] = useState<number>(INITIAL_WIDTH);
 
   useEffect(() => {
     if (!spanRef.current) return;
 
     const spanWidth = spanRef.current.offsetWidth;
-    setInputWidth(spanWidth + 36);
+    setInputWidth(spanWidth + PADDING_WIDTH);
   }, [value]);

src/components/onboarding/OnboardingStep.tsx (2)

18-18: 모바일 뷰포트 높이 처리 개선 고려

h-screen 대신 h-dvh 사용을 고려해보세요. 모바일 브라우저의 주소 표시줄로 인한 레이아웃 이슈를 방지할 수 있습니다. 상위 온보딩 페이지(src/app/onboarding/page.tsx)에서 이미 min-h-dvh를 사용하고 있어 일관성 측면에서도 유리합니다.

🔎 제안하는 수정

-    <main className="relative flex h-screen flex-col bg-white pt-[558px]">
+    <main className="relative flex h-dvh flex-col bg-white pt-[558px]">

---

19-33: 배경 오프셋 매직 넘버 상수화 고려

-translate-y-[110px]가 라인 25와 30에서 중복됩니다. 상수로 추출하거나 공통 클래스로 정의하면 유지보수가 용이해집니다.

🔎 제안하는 개선

 const OnboardingStep = ({ stepName, isLast, onNext }: Props) => {
   const { title, background } = onboardingContents[stepName];
+  const backgroundOffsetClass = "-translate-y-[110px]";
 
   return (
     <main className="relative flex h-screen flex-col bg-white pt-[558px]">
       {background.type === "image" && (
         <Image
           src={background.src}
           alt=""
           fill
           priority
-          className="pointer-events-none -translate-y-[110px] object-cover object-top"
+          className={`pointer-events-none ${backgroundOffsetClass} object-cover object-top`}
         />
       )}
       {background.type === "class" && (
         <div
-          className={`pointer-events-none absolute -translate-y-[110px] ${background.className}`}
+          className={`pointer-events-none absolute ${backgroundOffsetClass} ${background.className}`}
           aria-hidden
         />
       )}

src/config/onboardingSteps.ts (1)

1-6: 타입 정의가 잘 구성되어 있습니다.

as const 단언을 사용한 튜플 정의와 OnboardingStepName 타입 추출 패턴이 적절합니다. 다만, OnboardingBackground의 type: "class" 변형은 현재 사용되지 않고 있습니다. 향후 확장을 위한 것이라면 괜찮지만, 사용 계획이 없다면 YAGNI 원칙에 따라 제거를 고려해볼 수 있습니다.

src/components/onboarding/UploadAlert.tsx (3)

28-34: onClose() 호출이 중복될 수 있습니다.

handleFileChange에서 onSelectAlbum(file) 호출 후 onClose()를 호출하고 있지만, OnboardingProfile.tsx의 onSelectAlbum 콜백에서도 이미 setIsUploadOpen(false)를 호출합니다. 중복 호출은 현재 문제가 되지 않지만, 한 곳에서만 닫기 로직을 관리하는 것이 좋습니다.

또한, 동일한 파일을 다시 선택할 경우 onChange 이벤트가 발생하지 않습니다. input의 value를 초기화해야 합니다.

🔎 수정 제안

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
-   if (!file) return;
+   if (!file) return;
+   
+   e.target.value = ""; // 동일 파일 재선택 허용

    onSelectAlbum(file);
-   onClose();
+   // onClose는 부모에서 처리
  };

---

56-62: 파일 크기 검증이 없습니다.

accept="image/*"로 이미지 파일만 허용하고 있지만, 파일 크기에 대한 제한이 없습니다. 대용량 이미지 업로드 시 성능 문제나 서버 오류가 발생할 수 있으므로, 클라이언트 측에서 파일 크기를 검증하는 것을 권장합니다.

---

36-43: 접근성 개선을 고려해보세요.

모달에 role="dialog", aria-modal="true", aria-labelledby 속성이 없습니다. 또한 모달이 열릴 때 포커스 트래핑이 구현되어 있지 않아 키보드 사용자의 접근성이 제한될 수 있습니다.

src/components/common/AlertModal.tsx (3)

38-43: 배경 클릭으로 모달이 닫히지 않습니다.

UploadAlert은 배경 클릭 시 onClose를 호출하지만, AlertModal은 배경 클릭 핸들러가 없습니다. 컴포넌트 간 일관성을 위해 배경 클릭 동작을 통일하거나, closeOnBackdrop prop을 추가하여 제어하는 것을 고려해보세요.

---

53-65: 로딩 상태와 메시지 렌더링 로직이 명확합니다.

isLoading && loadingImageSrc 조건으로 로딩 이미지를 표시하고, 그렇지 않으면 message를 표시하는 로직이 잘 구성되어 있습니다. 다만 isLoading이 true이지만 loadingImageSrc가 없는 경우 아무것도 표시되지 않으므로, 이 케이스에 대한 폴백(예: 기본 스피너)을 고려해볼 수 있습니다.

---

54-58: <img> 태그 대신 Next.js의 Image 컴포넌트 사용을 고려해보세요.

Next.js 프로젝트에서는 이미지 최적화를 위해 next/image의 Image 컴포넌트를 사용하는 것이 권장됩니다. 단, GIF 파일의 경우 unoptimized prop이 필요할 수 있습니다.

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

src/hooks/usePasswordValidation.ts (1)

2-6: 주석 처리된 코드를 제거하는 것을 고려하세요.

사용하지 않는 주석 처리된 코드는 코드베이스를 복잡하게 만들고 향후 혼란을 초래할 수 있습니다. 이전 로직이 필요한 경우 Git 히스토리에서 확인할 수 있습니다.

🔎 제안된 수정 사항

-  // const isValidPassword = (pwd: string) => {
-  //   const hasLetter = /[A-Za-z]/.test(pwd);
-  //   const hasNumber = /\d/.test(pwd);
-  //   const hasSpecial = /[^A-Za-z0-9]/.test(pwd);
-  //   return pwd.length >= 8 && hasLetter && hasNumber && hasSpecial;
   const isValidPassword = (pwd: string) => {
     return pwd.length >= 8;
   };

src/components/onboarding/UploadButton.tsx (1)

39-39: Tailwind 클래스 사용을 권장합니다.

인라인 스타일 대신 Tailwind 클래스를 사용하여 일관성을 유지하는 것을 권장합니다.

🔎 수정 제안

     <div
       className="fixed inset-0 z-50 flex items-end justify-center"
-      style={{ backgroundColor: "rgba(36, 38, 40, 0.3)" }}
+      className="fixed inset-0 z-50 flex items-end justify-center bg-black/30"
       onClick={onClose}

src/hooks/useOnboardingFunnel.ts (1)

7-7: 타입 안전성 개선을 고려하세요.

OnboardingFunnelContext가 Record<OnboardingStepName, object>로 정의되어 각 스텝의 컨텍스트가 제네릭한 object 타입입니다. 현재는 빈 객체 {}만 사용하므로 문제없지만, 향후 각 스텝별로 특정 데이터를 저장해야 할 경우 타입 안전성이 보장되지 않습니다.

필요 시 각 스텝별 구체적인 타입을 정의하는 것을 고려하세요.

src/pages/onboarding/index.tsx (1)

28-28: localStorage 키를 상수로 추출하는 것을 고려하세요.

"onboardingDone" 문자열이 하드코딩되어 있습니다. 다른 곳에서도 이 키를 사용할 가능성이 있다면 상수로 추출하여 재사용성과 유지보수성을 높이는 것이 좋습니다.

🔎 제안하는 리팩토링

상수 파일 또는 해당 파일 상단에 추가:

const ONBOARDING_DONE_KEY = "onboardingDone";

사용:

-        localStorage.setItem("onboardingDone", "true");
+        localStorage.setItem(ONBOARDING_DONE_KEY, "true");

src/components/onboarding/OnboardingStep.tsx (2)

21-21: 매직 넘버를 상수로 추출하는 것을 고려하세요.

w-[440px], pt-[558px], mt-[13px] 등 여러 하드코딩된 수치가 있습니다. 이들을 상수로 정의하면 유지보수성과 가독성이 향상됩니다. 또한 디자인 시스템 토큰으로 관리할 수 있다면 더욱 좋습니다.

🔎 제안하는 리팩토링

const ONBOARDING_CONTAINER_WIDTH = 440;
const ONBOARDING_CONTENT_PADDING_TOP = 558;
const ONBOARDING_MARGIN_TOP = 13;

또는 Tailwind config에 커스텀 스페이싱으로 추가하여 재사용 가능하게 만들 수 있습니다.

---

34-34: className 조합 시 유틸리티 함수 사용을 고려하세요.

템플릿 리터럴로 className을 직접 연결하는 것보다 clsx 또는 프로젝트에서 사용 중인 cn 유틸리티를 활용하면 조건부 클래스 처리와 가독성이 개선됩니다.

🔎 제안하는 리팩토링

-            className={`pointer-events-none absolute -translate-y-[110px] ${background.className}`}
+            className={cn("pointer-events-none absolute -translate-y-[110px]", background.className)}

src/constants/onboardingSteps.ts (2)

5-9: 타입 중복을 확인하세요.

OnboardingFunnelSteps 타입이 src/hooks/useOnboardingFunnel.ts의 OnboardingFunnelContext와 유사한 구조를 가지고 있습니다. 두 타입이 동일한 목적을 가진다면 하나로 통합하여 중복을 제거하는 것을 고려하세요.

---

11-13: OnboardingBackground의 "class" 타입이 현재 사용되지 않습니다.

OnboardingBackground에서 type: "class" 옵션을 정의했지만, 현재 모든 스텝이 type: "image"만 사용하고 있습니다. 향후 확장을 위한 것이라면 문제없지만, 사용하지 않는다면 제거를 고려하세요.

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

src/components/onboarding/OnboardingProfile.tsx (1)

23-24: 메모리 누수 방지를 위해 Object URL 정리를 고려하세요.

useProfileImageUpload 훅이 URL.createObjectURL을 사용하여 이미지 URL을 생성하는데, 이러한 Object URL은 사용 후 URL.revokeObjectURL로 정리해야 메모리 누수를 방지할 수 있습니다. 컴포넌트가 언마운트되거나 새 이미지가 업로드될 때 이전 Object URL을 정리하는 것을 권장합니다.

useProfileImageUpload 훅에 cleanup 로직을 추가하는 것을 고려해보세요:

useEffect(() => {
  return () => {
    if (profileImage && profileImage.startsWith('blob:')) {
      URL.revokeObjectURL(profileImage);
    }
  };
}, [profileImage]);

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

src/components/common/LoadingModal.tsx (1)

13-13: 주석 처리된 코드를 제거하거나 TODO로 명시하세요.

loadingImageSrc prop이 주석 처리되어 있습니다. 향후 사용 계획이 있다면 TODO 주석으로 명시하고, 그렇지 않다면 완전히 제거하는 것이 코드 가독성과 유지보수성에 더 좋습니다.

♻️ 제안: 주석 처리된 코드 제거

 interface LoadingModalProps {
   isOpen: boolean;
   title: string;
   message?: string;
   confirmLabel?: string;
   onClose: () => void;
   backdrop?: AlertBackdrop;
   isLoading?: boolean;
-  //loadingImageSrc?: string;
 }

 const LoadingModal = ({
   isOpen,
   title,
   message,
   confirmLabel = "확인",
   onClose,
   backdrop = "default",
   isLoading = false,
-  //loadingImageSrc,
 }: LoadingModalProps) => {

Also applies to: 24-24

src/app/onboarding/page.tsx (1)

19-21: 불필요한 타입 단언을 제거하세요.

ONBOARDING_STEPS가 as const로 선언되어 있고 currentStepIndex가 배열 범위 내에서 관리되므로, 타입 단언 없이도 TypeScript가 올바른 타입을 추론할 수 있습니다.

♻️ 제안: 타입 단언 제거

-  const currentStepName = ONBOARDING_STEPS[
-    currentStepIndex
-  ] as OnboardingStepName;
+  const currentStepName = ONBOARDING_STEPS[currentStepIndex];

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

src/components/common/LoadingModal.tsx (1)

42-44: 접근성 개선: 로더에 레이블을 추가하세요.

로딩 상태를 나타내는 span 요소에 스크린 리더를 위한 접근 가능한 레이블이 없습니다.

♻️ 제안하는 접근성 개선

-            <span className="loader" />
+            <span className="loader" role="status" aria-label="로딩 중" />

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

src/components/onboarding/OnboardingProfile.tsx (1)

76-83: 중복된 상태 업데이트.

UploadButton 컴포넌트의 handleFileChange(line 53)에서 파일 선택 직후 onClose()가 이미 호출됩니다. 따라서 line 79의 setIsUploadOpen(false)는 중복 호출입니다.

♻️ 중복 제거 제안

 onSelectAlbum={async file => {
   try {
     await uploadImage(file);
-    setIsUploadOpen(false);
   } catch (error) {
     console.error("이미지 업로드 실패:", error);
   }
 }}

src/components/onboarding/UploadButton.tsx (2)

23-36: 포커스 관리 개선 권장.

모달이 열릴 때 컨테이너 div에 포커스를 주고 있지만, 첫 번째 인터랙티브 요소(버튼)에 포커스를 주는 것이 접근성 측면에서 더 좋습니다.

♻️ 첫 번째 버튼에 포커스 주기

+const firstButtonRef = useRef<HTMLButtonElement | null>(null);

 useEffect(() => {
   if (!isOpen) return;

   const handleEscape = (e: KeyboardEvent) => {
     if (e.key === "Escape") onClose();
   };

   document.addEventListener("keydown", handleEscape);
-  modalRef.current?.focus();
+  firstButtonRef.current?.focus();

   return () => {
     document.removeEventListener("keydown", handleEscape);
   };
 }, [isOpen, onClose]);

버튼에 ref 추가:

 <button
   type="button"
+  ref={firstButtonRef}
   className="bg-neutral-11 text-button-sb text-mint-01 ..."
   onClick={handleAlbumClick}
 >

---

56-64: 인라인 스타일을 Tailwind로 대체 고려.

backgroundColor가 인라인 스타일로 지정되어 있습니다. 프로젝트 일관성을 위해 Tailwind의 bg-black/30 또는 커스텀 색상 클래스 사용을 고려해 보세요.

♻️ Tailwind 클래스 사용

 <div
   className="fixed inset-0 z-50 flex items-end justify-center bg-black/30"
-  style={{ backgroundColor: "rgba(36, 38, 40, 0.3)" }}
   onClick={onClose}
   ...
 >

정확한 색상이 필요하다면 tailwind.config에 커스텀 색상을 추가하세요.

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

src/components/common/FullButton.tsx (1)

24-33: 불필요한 래퍼 + text-button-sb 중복 적용이라 정리 권장

버튼 자체가 이미 items-center justify-center인데 내부에 높이 고정 래퍼(div)를 한 번 더 두고, text-button-sb도 stateClass/자식 span에 중복이라 유지보수성이 떨어집니다. (한 군데로 모으는 편이 안전)

제안 diff

-  const baseClass =
-    "flex h-14.5 w-full cursor-pointer items-center justify-center rounded-2xl px-3.5";
-  const activeClass = "bg-mint-01 text-white text-button-sb";
+  const baseClass =
+    "flex h-[58px] w-full cursor-pointer items-center justify-center rounded-2xl px-3.5";
+  const activeClass = "bg-mint-01 text-white";
   const inactiveClass =
-    "border border-neutral-08 bg-white text-neutral-06 text-button-sb";
+    "border border-neutral-08 bg-white text-neutral-06";
@@
     <button
       className={`${baseClass} ${stateClass} ${className}`}
       disabled={!isActive}
       {...props}
     >
-      <div className="flex h-[58px] items-center justify-center">
-        <span className="text-button-sb">{children}</span>
-      </div>
+      <span className="text-button-sb">{children}</span>
     </button>

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

src/components/onboarding/UploadButton.tsx (1)

47-54: onSelectAlbum 호출 후 onClose 중복 호출 가능성

onSelectAlbum이 비동기 함수로 전달될 경우, onClose()가 즉시 호출되어 모달이 먼저 닫힙니다. 현재 부모 컴포넌트(OnboardingProfile)에서도 setIsUploadOpen(false)를 호출하고 있어 중복 호출이 발생합니다.

모달 닫힘 시점을 부모가 제어하도록 onClose() 호출을 제거하는 것이 더 명확합니다.

♻️ 제안된 수정

 const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
   const file = e.target.files?.[0];
   if (!file) return;

   onSelectAlbum(file);
   e.target.value = "";
-  onClose();
 };

src/components/onboarding/OnboardingProfile.tsx (3)

34-42: 에러 발생 시 사용자 피드백이 없습니다.

현재 에러 발생 시 console.error만 호출하고 사용자에게 아무런 피드백을 주지 않습니다. API로 교체 시 사용자에게 실패 메시지를 표시하는 것이 좋습니다.

---

62-64: 반응형 레이아웃 개선 필요

px-[118px]는 고정된 값으로 작은 화면에서 레이아웃이 깨질 수 있습니다. 비율 기반 패딩이나 max-width를 사용하는 것이 더 안정적입니다.

♻️ 제안된 수정

-            <div className="w-full px-[118px]">
+            <div className="mx-auto w-full max-w-[200px]">
               <NameInput value={name} onChange={setName} />
             </div>

---

80-87: setIsUploadOpen(false) 중복 호출

UploadButton 내부에서 onSelectAlbum 호출 후 onClose()를 이미 실행하므로, Line 83의 setIsUploadOpen(false)는 중복됩니다. UploadButton에서 onClose() 호출을 제거하면 이 코드가 의도대로 동작합니다.

src/app/signup/agree/page.tsx (1)

12-23: INITIAL_AGREEMENTS 초기화 및 필수 동의 키 관리 개선

타입 안전성은 이미 AgreementKey 명시 지정으로 보장되고 있으나, 다음 두 가지 개선이 권장됩니다:

• useState(INITIAL_AGREEMENTS): 상수 객체를 직접 공유하지 말고 useState<Record<AgreementKey, boolean>>(() => ({ ...INITIAL_AGREEMENTS }))로 초기화하여 방어적으로 처리
• isConfirmActive 하드코딩 제거: 필수 동의 키 리스트(service, finance, personalRequired)를 REQUIRED_AGREEMENT_KEYS 같은 상수로 별도 관리하고, 동적으로 검증하면 필수 조건 변경 시 drift 위험 제거

최소 개선 방안 (diff)

   const [agreements, setAgreements] =
-    useState<Record<AgreementKey, boolean>>(INITIAL_AGREEMENTS);
+    useState<Record<AgreementKey, boolean>>(() => ({ ...INITIAL_AGREEMENTS }));

그리고 src/constants/agreement.ts에 추가:

+ export const REQUIRED_AGREEMENT_KEYS: AgreementKey[] = ['service', 'finance', 'personalRequired'];

page.tsx에서:

- const isConfirmActive =
-   agreements.service && agreements.finance && agreements.personalRequired;
+ const isConfirmActive = REQUIRED_AGREEMENT_KEYS.every(key => agreements[key]);

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro